<template>
	<view>
		<view class="form bgfff">
			<view class="form-item flex-ac">
				<text class="label">真实姓名</text>
				<view class="right-input flex-ac flex1">
					<input type="text" v-model="formData.name" placeholder="请输入您的真实姓名" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="form-item flex-ac">
				<text class="label">客户号</text>
				<view class="right-input flex-ac flex1">
					<input type="text" v-model="formData.customerNum" placeholder="请输入您的客户号" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="form-item flex-ac">
				<text class="label">身份证</text>
				<view class="right-input flex-ac flex1">
					<input type="text" v-model="formData.identityCode" placeholder="请输入您的身份证" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="form-item flex-ac">
				<text class="label">手机号码</text>
				<view class="right-input flex-ac flex1">
					<input type="text" v-model="formData.phone" placeholder="请输入您的手机号码" placeholder-class="plStyle" />
				</view>
			</view>
			<view class="form-item flex-ac">
				<text class="label">验证码</text>
				<view class="right-input flex-ac flex1">
					<input type="text" v-model="formData.vCode" placeholder="请输入您的手机验证码" placeholder-class="plStyle" />
					<view @tap="getVCode" style="font-size: 28rpx;color: #0081ff;">{{vcodeBtnName}}</view>
				</view>
			</view>
		</view>
		<view class="saveBtn" @tap="handleSumbit">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData:{
					name:'', //真实姓名 任传奇
					customerNum:'',//交易账号 888888
					identityCode:'', //身份证号 320321199507130239
					phone:'', //手机号码 13616113932
					vCode:'', //验证码
					productCode:'11',
					productName:'百亿新纪元',
					termValidity:'10'
				},
				vcodeBtnName: "发送验证码",
				countNum: 120,
				countDownTimer: null,
			}
		},
		onLoad() {

		},
		methods: {
			handleSumbit(){
				if(!this.formData.name) return this.$u.msg('请输入真实姓名！')
				if(!this.formData.customerNum) return this.$u.msg('请输入客户号！')
				if(!this.formData.identityCode) return this.$u.msg('请输入身份证！')
				if(!this.formData.phone) return this.$u.msg('请输入手机号码！')
				if(!this.formData.vCode) return this.$u.msg('请输入手机验证码！')
				this.$http.get(`/api/h5/a/infoVerify`,this.formData).then(res => {
					if (res.data.code == 200) {
						let result = res.data.data
						console.log('提交认证',result)
						this.$u.vuex('vuex_userInfo', JSON.stringify(result));
                        this.$u.to('/pages/index/confirmationInformation','redirectTo')						
					} else {
						this.$u.msg(res.data.msg)
					}
				})
			},
			getVCode: function() { //获取验证码
				var myreg = /^[1][0-9]{10}$/;
				if (!myreg.test(this.formData.phone)) {
					this.$u.msg('请正确填写手机号码！')
					return false;
				}
				// 手机号码为 :  this.phone
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '发送验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}
				this.vcodeBtnName = "发送中...";
				// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
				this.$http.get(`/api/common/sms/${this.formData.phone}`).then(res => {
					if (res.data.code == 200) {
						let result = res.data.data
						console.log('验证码',result)
						this.$u.msg('短信已发送，请注意查收！')
						// 倒计时
						this.countNum = 60;
						this.countDownTimer = setInterval(() => {
							this.countDown();
						}, 1000);
						// 假设发送成功，给用户提示
					} else {
						this.$u.msg(res.data.msg)
					}
				})
				
			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒重发';
			},
		}
	}
</script>

<style lang="less">
.form{
	padding: 10rpx 30rpx;
	.form-item{
		padding: 20rpx 0;
		border-bottom: 1px solid #f6f7f8;
		&:last-child{
			border: none;
		}
		.label{
			width: 160rpx;
		}
	}
}
.saveBtn{
	margin: 80rpx 60rpx 30rpx 60rpx;
	height: 85rpx;
	border-radius: 15rpx;
}
</style>